﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://1stjs.googlecode.com/svn/trunk/fw4/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</meta>
<title>F.scroll演示</title>
<style type="text/css">
*{margin:0; padding:0;}
html,body{width:100%; height:100%;}
#sbox14{width:360px; height:400px; border:1px dashed blue;}
#sbox14 .panel{width:360px; height:360px; overflow:hidden;}
#sbox14 .panel div{width:1080px; height:1080px}
#sbox14 .panel img{width:100px; height:100px; margin:10px; float:left;}
#sbox14 .btn{text-align:center;}
/*
#sbox .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
#sbox .clearfix{*zoom:1;}
*/
</style>
<script type="text/javascript" src="1st.js"></script>
</head>
<body>
<h3>明星秀幻灯片示例</h3>
<div id="sbox14">
	<div class="panel"></div>
	<div class="btn">
<!--
		<button id="up"><span style="font-family: Webdings">5</span>向上</button>
		<button id="left"><span style="font-family: Webdings">3</span>向左</button>
		<button><span style="font-family: Webdings">;</span>停止</button>
		<button><span style="font-family: Webdings">8</span>播放</button>
		<button id="right"><span style="font-family: Webdings">4</span>向右</button>
		<button id="down"><span style="font-family: Webdings">6</span>向下</button>
-->
		<button id="up">▲向上</button>
		<button id="left">◀向左</button>
		<button>||停止</button>
		<button>▸▸播放</button>
		<button id="right">▶向右</button>
		<button id="down">▼向下</button>
	</div>
	<!--div>
		缩放：
		<select onchange="testDiv.zoom = this.options[selectedIndex].value">
			<option value=1>100%</option>
			<option value=2>200%</option>
			<option value=3>300%</option>
		</select>
		托动范围：
		<select onchange="testDiv.drag = this.options[selectedIndex].value">
			<option value="both">随意</option>
			<option value="horizontal" selected>横向</option>
			<option value="vertical">纵向</option>
		</select>
	</div-->
</div>
<script type="text/javascript">
var $html = "";
for(var i=1; i<82; i++){
	$html += '<img src="data/img/slides/star/'+i.zero(3)+'.jpg" />';
}
var sbox = F("sbox14");
sbox.cls(".panel").append("div").html($html);
sbox.slides({
	panel:"scrollTop",
	init: function(me){
		F("up").click(me.go2prev.proxy(me));
		F("down").click(me.go2next.proxy(me));
	},
	loop:0
});
sbox.slides({
	panel:"scrollLeft",
	init: function(me){
		F("left").click(me.go2prev.proxy(me));
		F("right").click(me.go2next.proxy(me));
	},
	loop:0
});
</script>
</body>
</html>